import React, { useState,FC } from 'react';
import { Table, Tag, Space,Popconfirm,Button} from 'antd';
import { connect ,Dispatch,Loading,UserState} from 'umi'
import UserModal from './components/UserModal';
import { UserObj,UserForm } from './data.d';
interface UserPageProps{
    users:UserState,
    dispatch:Dispatch,
    userListLoading:boolean,
}
const UserListPage:FC<UserPageProps> = ({users,dispatch,userListLoading}) => {
    const [modalVisible,setModalVisible] = useState(false);
    const [record,setRecord] = useState<UserObj|undefined>(undefined);
    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',
        },
        {
          title: 'Name',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: 'Email',
          dataIndex: 'email',
          key: 'email',
        },
        {
            title: 'Create Time',
            dataIndex: 'create_time',
            key: 'create_time',
        },
        {
          title: 'Action',
          key: 'action',
          render: (text:string, record:UserObj) => (
            <Space size="middle">
                <a onClick={()=>{
                    editHandler(record);
                }}>Edit</a>
                <Popconfirm
                    title="确定删除吗?"
                    onConfirm={()=>{
                        confirm(record);
                    }}
                    okText="Yes"
                    cancelText="No">
                <a>Delete</a>
                </Popconfirm>
            </Space>
          ),
        },
      ];
    const confirm = (record:UserObj) =>{
        dispatch({
            type:'users/delete',
            payload:{id:record.id}
        });
    }
    const editHandler = (record:UserObj) =>{
        setModalVisible(true);
        setRecord(record);
    } 
    const closeHandler = ()=>{
        setModalVisible(false);
    }
    const onFinish = (values:UserForm) =>{
        let id = 0;
        if(record){
            id = record.id;
        }
        if(id){
            dispatch({
                type:'users/edit',  //在外部使用需要加上namespace
                payload:{id,values}
            });  
        }else{
            dispatch({
                type:'users/add',  //在外部使用需要加上namespace
                payload:{values}
            });
        }
        
        setModalVisible(false);
    };
    const onAdd=()=>{
        setRecord(undefined);
        setModalVisible(true);
    };
    return (
        <div className="list-table">
            <Button type='primary' onClick={onAdd}>Add</Button>
            <Table columns={columns} dataSource={users.data} rowKey="id" loading={userListLoading}/>
            <UserModal visible={modalVisible} 
                onFinish={onFinish}
                onCancel={closeHandler}
                record={record}>
            </UserModal>
        </div>
    )
}
//const mapStateToProps = (state)=>{};
const mapStateToProps = ({users,loading}:{users:UserState,loading:Loading})=>{   
    return {
        users,
        userListLoading: loading.models.users,
    };
}
export default connect(mapStateToProps)(UserListPage)